import * as React from 'react';
import {observer} from 'mobx-react'
import styles from './index.scss';

import Header from "../../components/Header";
import SecondStore from "../../store/secondStore";
import LeftOneTopTwo from "../../components/LeftOneTopTwo";
import LeftOneBotOne from "./LeftOneBotOne";
import LeftOneBotTwo from "./LeftOneBotTwo";
import LeftTwoTopOne from "./LeftTwoTopOne";
import LeftTwoTopTwo from "./LeftTwoTopTwo";
import LeftTwoBotOne from "./LeftTwoBotOne";
import LeftTwoBotTwo from "./LeftTwoBotTwo";
import TwelveMonth from "./TwelveMonth";
import MidTopTwo from "./MidTopTwo";
import MidBotOne from "./MidBotOne";
import MidBotTwo from "./MidBotTwo";
import NumN from '../test/OneMid/Num'
import RightOneBottom from "./RightOneBottom";
import RightTwoTopTwo from "./RightTwoTopTwo";
import OpenNum from './OpenNum'
import RightTwoTopTwoCircle from "./RightTwoTopTwoCircle";
import RightTwoTopOne from "./RightTwoTopOne";
import FirstStore from "../../store/firstStore";
import {ILogType} from "../../type/firstType";
import Modal from "./LeftTwoTopOne/Modal";
import Logistics from './logistics'
interface IProps {
}

interface IState {
    isLoading: any,
    isReq:any
}

const neverResolve = new Promise(() => {
});

function Suspender({suspend}) {
    if (suspend) {
        throw neverResolve;
    } else {
        return null;
    }
}

function Preload({show, children}) {
    return (
        <React.Suspense fallback={null}>
            {children}
            <Suspender suspend={!show}/>
        </React.Suspense>
    );
}

@observer
class Home extends React.Component<IProps, IState> {

    constructor(props) {
        super(props);
        this.state = {
            isLoading: true,
            isReq:false,
        }
    }

    public async componentDidMount() {
        if (window.location.hash.split('?SerialLotNumber=')[1]) {
            const url = window.location.hash.split('?SerialLotNumber=')
            FirstStore.SerialLotNumber = parseInt(url[1], 10)
        }
        this.getTime()
        await FirstStore.initSecond()
        this.refreshPage();
    }
    // 页面卸载把 图表渲染进度变为0
    public async componentWillUnmount() {
        console.log('页面卸载')
        SecondStore.firstRender = 0;
        SecondStore.twiceRender =0;
        clearInterval(this.refreshInterval)
    }

    // 定时器
    private interval: any
    private refreshInterval: any
    // 刷新页面
    public refreshPage = () => {
        this.refreshInterval = setInterval(() => {
            if (SecondStore.isShowSecond) {
                FirstStore.initSecondS()
            }else{
                FirstStore.initSecond()
            }
        }, 900000)
    }
    // 获取时间
    public getTime = () => {
        const weeks = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
        const month = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']
        // 每隔一秒获取当前时间，并更新状态数据 currentTime
        this.interval = setInterval(() => {
            const currentTime = new Date(Date.now());
            SecondStore.year = currentTime.getFullYear(),
                SecondStore.month = month[(currentTime.getMonth())],
                SecondStore.day = currentTime.getDate(),
                SecondStore.hour = currentTime.getHours() + ':' + (currentTime.getMinutes().toString().length === 1 ? '0' + currentTime.getMinutes() : currentTime.getMinutes()),
                SecondStore.week = weeks[currentTime.getDay()]
        }, 1000)
    };

    // 转化麦迪逊时间
    public handleChangeTime = () => {
        const currentTime = new Date(Date.now());
        const hour = currentTime.getHours()
        if (hour + 8 <= 24) {
            return (hour + 8) + ':' + (currentTime.getMinutes().toString().length === 1 ? '0' + currentTime.getMinutes() : currentTime.getMinutes())
        } else {
            return '0' + (hour + 8 - 24) + ':' + (currentTime.getMinutes().toString().length === 1 ? '0' + currentTime.getMinutes() : currentTime.getMinutes())
        }
    }

    // 控制页面切换
    public handleChange = () => {
        SecondStore.isShowSecond = !SecondStore.isShowSecond
        if (this.state.isLoading === null) {
            this.setState({
                isLoading: true
            })
        } else {
            this.setState({ 
                isLoading: null
            })
        }
        if (SecondStore.isShowSecond) {

            if(this.state.isReq){
                console.log('已经加载过了')
                return
            }

            FirstStore.initSecondS()
            this.setState({
                isReq: true
            })
            return
        }
        //FirstStore.initSecond()
    }

    // 控制人员信息Modal
    public handleModal = (name: number) => {
        SecondStore.modalNum = name
        SecondStore.isShowModal = true
    }

    //
    public handleClose = () => {
        SecondStore.isShowModal = false
    }

    public handleReturn = () => {
        let timer = FirstStore.timer
        window.location.href = '#/'
        console.log(timer,'清理定时器')
        window.clearTimeout(timer);
        FirstStore.SerialLotNumber = null
    }


    public render() {
        const {
            countOrderCM, countOrderPM, countOrderCV, countOrderII, countOrderCS, orderList,
            countOrderFiveX, countOrderFiveCMY, countOrderFiveCSY, countOrderFiveCVY, countOrderFiveIIY, countOrderFivePMY,
            dayConsumeX, dayConsumeY, equipConsume, SerialLotNumber, engineerStatus, downTimeX, downTimeYB, downTimeYL,
            uptime_rate, unFinished, getLogInfo, emergencyrList, deviceInfo,
            interruptX, interruptY1, interruptY2,interruptY2All,interruptY3All, interruptY3, interruptY4, interruptY5,
            processX, processY1, processY2,LogisticsArr
        }
            = FirstStore
        const {isLoading} = this.state
        const {modalNum, isShowModal} = SecondStore
        return (
            <div className={styles.container}>
                <div className={styles.leftOne}>
                    <div className={styles.leftTwoTopOne}>
                        <LeftTwoTopOne onSelect={this.handleModal} SerialLotNumber={SerialLotNumber}/>
                    </div>
                    <Preload show={isLoading === null}>
                        <div className={styles.rightTwoMidN}>
                            <span className={styles.rightTwoTopOneLeftTitle}>开机率</span>
                            <div className={styles.rightTwoMidDoubleN}>
                                <RightTwoTopTwoCircle uptime_rate={uptime_rate} chartType='water'/>
                                <OpenNum dataX={downTimeX} dataYB={downTimeYB}
                                         dataYL={downTimeYL}/>
                            </div>
                        </div>
                        <div className={styles.leftTwoBotOne}>
                            <LeftTwoBotOne dataX={processX} dataYB={processY1} dataYL={processY2}
                                           unFinished={unFinished}/>
                        </div>
                        <div className={styles.leftTwoBotTwo}>
                            <Logistics LogisticsArr={LogisticsArr}/>
                        </div>
                        {/* <div className={styles.leftTwoBotTwo}>
                            <LeftTwoBotTwo emergencyrList={emergencyrList}/>
                        </div> */}
                    </Preload>
                    <Preload show={isLoading !== null}>
                        <div className={styles.leftTwoTopTwo}>
                            <TwelveMonth countII={countOrderII} countPM={countOrderPM} countCV={countOrderCV}
                                         countCS={countOrderCS} countCM={countOrderCM}
                                         dataX={countOrderFiveX} dataY1={countOrderFiveCMY}
                                         dataY2={countOrderFiveCSY}
                                         dataY3={countOrderFiveCVY} dataY4={countOrderFiveIIY}
                                         dataY5={countOrderFivePMY}
                            />
                        </div>
                        <div className={styles.leftOneBotTwo}>
                            <LeftOneBotTwo equipConsume={equipConsume} dataX={dayConsumeX}
                                           dataY={dayConsumeY}/>
                        </div>
                    </Preload>


                </div>
                <div className={styles.rightOne}>
                    <div className={styles.rightOneTopOne}>
                    放疗设备智联服务平台
                    </div>
                    <div className={styles.rightOneBottom}>
                        <RightOneBottom/>
                        <div className={styles.rightOneBottomC}>
                            <div className={styles.return} onClick={this.handleReturn}>返回</div>
                        </div>
                    </div>
                </div>

                <div className={styles.mid}>


                    <Preload show={isLoading === null}>
                        <div className={styles.midTopOne}>
                            {
                                deviceInfo &&
                                `DRS软件版本:${deviceInfo.SCS_DRSSoftwareVersion},OBC软件版本:${deviceInfo.OBCSoftwareVersion},RDS软件版本:${deviceInfo.RDSMachineVersion}`
                            }
                        </div>

                        <div className={styles.midTopTwo}>
                            <MidTopTwo getLogInfo={getLogInfo}/>
                        </div>
                        <div className={styles.midBotTwo}>
                            <MidBotTwo/>
                        </div>
                        <div className={styles.midBotOne}>
                            <MidBotOne/>
                        </div>
                    </Preload>

                    <Preload show={isLoading !== null}>
                        <div className={styles.rightTwoTopOne}>
                            <div className={styles.rightTwoTopOneLeft}>
                                <span className={styles.rightTwoTopOneLeftTitle}>工作负荷统计</span>
                                <div className={styles.rightTwoTopOneLeftTop}>
                                    <span className={styles.rightTwoTopOneLeftTopText}>MVCT</span>
                                    <div className={styles.rightTwoTopOneLeftTopC}>
                                        {
                                            interruptY2All &&
                                            interruptY2All.toString().split('').map((item, index) => {
                                                return (
                                                    <NumN key={`item_${index}`} count={item}/>
                                                )
                                            })
                                        }
                                    </div>
                                </div>
                                <div className={styles.rightTwoTopOneLeftTop}>
                                    <span className={styles.rightTwoTopOneLeftTopText} style={{fontSize:'14px'}}>Tx</span>
                                    <div className={styles.rightTwoTopOneLeftTopC}>
                                        {
                                            interruptY3All &&
                                            interruptY3All.toString().split('').map((item, index) => {
                                                return (
                                                    <NumN key={`item_${index}`} count={item}/>
                                                )
                                            })
                                        }
                                    </div>
                                </div>
                            </div>
                            <RightTwoTopTwo isFour={false} interruptX={interruptX} interruptY1={interruptY1}
                                            interruptY2={interruptY2}
                                            legend={['Tx recoverable Int‘s', 'MVCT recoverable Int’s', 'Tx+ MVCT unrecoverable Int’s']}
                                            interruptY3={interruptY3} title='TX-INTERRUPT'/>
                        </div>
                        <div className={styles.rightTwoMid}>
                            <span className={styles.rightTwoTopOneLeftTitle}>QA/治疗分次统计</span>
                            <div className={styles.rightTwoMidDouble}>
                                <RightTwoTopTwoCircle chartType='doublePie'/>
                                <RightTwoTopTwo isFour={false} interruptX={interruptX} interruptY1={interruptY4}
                                                interruptY2={interruptY2}
                                                legend={['Tx Procedures', 'MVCT procs', 'QA Procedures']}
                                                interruptY3={interruptY3} title='TX-INTERRUPT'/>
                            </div>
                        </div>
                        <div className={styles.rightTwoMid1}>
                            <span className={styles.rightTwoTopOneLeftTitle}>中断分次统计</span>
                            <div className={styles.rightTwoMidDouble}>
                                <RightTwoTopTwoCircle chartType='pie'/>
                                <RightTwoTopTwo isFour={true} interruptY1={interruptY4} interruptX={interruptX}
                                                interruptY2={interruptY2}
                                                interruptY3={interruptY3} interruptY4={interruptY5}
                                                title='DAILY PROCEDURES'/>
                            </div>
                        </div>
                    </Preload>

                </div>
                <div className={styles.change} onClick={this.handleChange}/>
                {
                    isShowModal ?
                        <Modal onClose={this.handleClose} engineerStatus={engineerStatus[modalNum]}/>
                        : null
                }
            </div>
        );
    }
}

export default Home;
